<!--
 * @Descripttion: 文件说明
 * @version: 0.0.1
 * @Author: sunchangshun
 * @Date: 2021-02-18 07:58:07
 * @LastEditors: gaojiapeng
 * @LastEditTime: 2021-04-13 16:50:24
-->
<template>
  <div class="chart" ref="chart">
    <div id="chartQHDDY" style="height: 100%;width: 100%"></div>
  </div>
</template>
<script>
import { GetDlpSCCount} from "@/api";
import DataSet from "@antv/data-set";
import * as echarts from "echarts";
import { setChartData, yclLabelMap} from "@/views/Home/Layout/newLabel";
export default {
  data() {
    return {
      timerSC: null,
      charmaxval : 10,
      MyChart: null
    };
  },
  mounted() {
    this.getChart()
    this.timerSC = setInterval(() => {
      this.getChart()
    }, window.config.HomeReloadTime);
  },
  methods: {
    getChart() {
      const stamp1 = new Date(new Date().setHours(0, 0, 0, 0)); //获取当天零点的时间
      const stamp2 = new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1); //获取当天23:59:59的时间
      const startDate=this.formatterDate(stamp1,"yyyy-MM-ddThh:mm:ss")
      const endDate=this.formatterDate(stamp2,"yyyy-MM-ddThh:mm:ss")
      const PostData={
        "deviceTreeReqVO": {
          "deviceIds": ["1601507817792716801", "1639324501785825282", "1601509938265047042", "1601509137492721666","1629015354620231682"],
          "level": 2,
          "schemeId": "49814743050059776"
        },
        "dispatchingLineId": 0,
        "endTime": startDate,
        "queryType": "1",
        "startTime": startDate,
        "type": 2
      }
      GetDlpSCCount(PostData).then(res => {
        const ret = res.data.data
        const {dataX, dataY} = setChartData(ret, yclLabelMap, 'productName', 'count')
        // for (let i=0;i<res.data.data.length;i++){
        //   if(res.data.data[i].list.length){
        //     dataY.push(res.data.data[i].list[0].count)
        //   }else{
        //     dataY.push(0)
        //   }
        // }
        var chartDom = document.getElementById('chartQHDDY');
        var myChart = echarts.init(chartDom);

        let zoomShow = false;
        if (dataY.length > 14) {
          zoomShow = true;
        } else {
          zoomShow = false;
        }
        var option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            top: "10%",
            right: "5%",
            left: "5%",
            bottom: "25%",
          },
          xAxis: [
            {
              type: "category",
              data: dataX,
              axisLine: {
                lineStyle: {
                  color: "rgba(66, 192, 255, .3)",
                },
              },
              axisLabel: {
                interval: 0,
                margin: 10,
                color: "#05D5FF",
                textStyle: {
                  fontSize: 11,
                },
                rotate: "40",
              },
              axisTick: {
                //刻度
                show: false,
              },
            },
          ],
          yAxis: [
            {
              name: "加工件数/个",
              nameTextStyle:{
                color:"#65ABE7",
                fontSize:12,
              },
              axisLabel: {
                padding: [3, 0, 0, 0],
                formatter: "{value}",
                color: "rgba(95, 187, 235, 1)",
                textStyle: {
                  fontSize: 11,
                  color: "#fff",
                },
              },
              axisTick: {
                show: true,
              },
              axisLine: {
                lineStyle: {
                  color: "rgba(66, 192, 255, .3)",
                },
              },
              splitLine: {
                lineStyle: {
                  color: "rgba(255,255,255,0)",
                },
              },
            },
          ],
          dataZoom: [
            //滚动条
            {
              show: zoomShow,
              type: "slider",
              realtime: true,
              startValue: 0,
              endValue: 14,
              xAxisIndex: [0],
              bottom: "10",
              left: "30",
              height: 10,
              borderColor: "rgba(0,0,0,0)",
              textStyle: {
                color: "#05D5FF",
              },
            },
          ],
          series: [
            {
              type: "bar",
              data: dataY,
              barWidth: "10",
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(5, 213, 255, 1)", // 0% 处的颜色
                      },
                      {
                        offset: 0.98,
                        color: "rgba(5, 213, 255, 0)", // 100% 处的颜色
                      },
                    ],
                    false
                  ),
                  shadowColor: "rgba(5, 213, 255, 1)",
                  shadowBlur: 4,
                },
              },
              label: {
                normal: {
                  show: true,
                  lineHeight: 10,
                  formatter: "{c}",
                  position: "top",
                  textStyle: {
                    color: "#fff",
                    fontSize: 10,
                  },
                },
              },
            },
          ],
        };
        myChart.setOption(option);
      });
    },
    //时间格式化
    formatterDate(date,fmt){
      let nowDate = {
        yyyy: date.getFullYear(), // 年
        MM: date.getMonth() + 1, // 月份
        dd: date.getDate(), //日
        hh:date.getHours(),
        mm:date.getMinutes(),
        ss:date.getSeconds()
      }
      if(/(y+)/.test(fmt)){
        fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
      }
      for(var k in nowDate){
        if(new RegExp("("+ k +")").test(fmt)){
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (nowDate[k]) : (("00"+ nowDate[k]).substr((""+ nowDate[k]).length)));
        }
      }
      return fmt;
    },
  },
  destroyed() {
  // 清理定时器
  clearTimeout(this.timerSC)
  this.timerSC = null
  clearInterval(this.timerSC)
}
};
</script>
<style lang="scss" scoped>
.chart {
  height: 100%;
  width: 100%;
  padding: 10px;
}
</style>
